import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import imgUrl from '../style/imgs/logo.png';
import '../style/less/main.css';
import axios from '../api/index';
import SubNav from './SubNav';
import Tables from './Tables';
import NoPage from './NoPage'; 
import Button from './Button'; 
import AddToDo from './AddToDo'; 
//import Echarts from './Echarts';

import { Menu, Icon,Row, Col } from 'antd';
import { BrowserRouter, Route, Redirect, Switch} from 'react-router-dom';

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
class Nav extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            current: this.props.name
          }
        
    }
   
    render(){
        return(
          <div className="Content" style={{width:'calc(100%-180px)'}}>
          
            <Menu
            onClick={this.handleClick}
            selectedKeys={[this.state.current]}
            mode="horizontal"
            style={{ height: 60 }}
          >
            <Menu.Item key="mail">
              <Icon type="mail" />客服服务
            </Menu.Item>
            <SubMenu title={<span className="submenu-title-wrapper"><Icon type="appstore" />生产运行</span>}>
            </SubMenu>
            <SubMenu title={<span className="submenu-title-wrapper"><Icon type="setting" />管网管理</span>}>
                <Menu.Item key="setting:1">营业收费管理系统</Menu.Item>
                <Menu.Item key="setting:2">用户报装系统</Menu.Item>
            </SubMenu>
            <SubMenu title={<span className="submenu-title-wrapper"><Icon type="setting" />综合管理</span>}>
                <Menu.Item key="setting:1">工程管理系统</Menu.Item>
                <Menu.Item key="setting:2">物资采购管理系统</Menu.Item>
                <Menu.Item key="setting:3">OA办公管理系统</Menu.Item>
            </SubMenu>
            <SubMenu title={<span className="submenu-title-wrapper"><Icon type="setting" />系统管理</span>}>
                <Menu.Item key="setting:1">系统集成公共平台</Menu.Item>
                <Menu.Item key="setting:2">工作流配置平台</Menu.Item>
            </SubMenu>
          </Menu>
      
      </div>
        )
    }
}
class Head extends React.Component{
    constructor(){
        super();
        this.state = {
            current: 'mail',
          }
        
    }
    componentWillMount(){
        axios.api.firstMenu().then((res)=>{
           
        });
    }
    render(){
        return(
                <div className="nav">
                    <Row>
                        <Col span={4}><img className='logo' src={imgUrl}/></Col>,
                        <Col offset={4} span={16} style={{ height: 60 }}><Nav name={this.state.current}/></Col>
                    </Row>
                </div>
           
        )
    }

}
class Main extends React.Component {
   constructor (props) {
       super(props)
        console.log(this)
   }
   componentWillMount(e){
   }
   componentDidMount(e){
   }
  render() {
      return (
          <div>
              <Head />
              <div className='content'>
                <SubNav />
             
                <Switch>
                    <Route path="/main/t" component={Tables} />
                    <Route path="/main/b" component={Button} />
                    <Route component={AddToDo} />
                </Switch>
            
              </div>
          </div>
      );
  }
}

export default Main;
